<template>
  <div style="padding:20px">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item prop="keyword" label="关键字:">
        <el-input
          v-model="queryParams.keyword"
          placeholder="请输入关键字"
          clearable
          style="width: 240px"
        />
      </el-form-item>

      <el-form-item prop="time" label="反馈提交日期:">
        <el-date-picker
          v-model="time"
          type="datetimerange"
          @change="chooseTime()"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button
            type="primary"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button size="mini" @click="resetQuery"
            >重置</el-button
          >
      </el-form-item>
    </el-form>
    <div class="box_list">
      <el-row :gutter="10" class="mb8">
      <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
      <div class="typeButton"  style="display: flex;">
        <button style="width:110px;" @click="chooseStatus('')" :class="{ active:queryParams.status === '' }">全部</button>
        <button style="width:110px;margin-left: 0px;" @click="chooseStatus(1)" :class="{ active:queryParams.status === 1}">已读</button>
        <button style="width:100px;margin-left: 0px;" @click="chooseStatus(0)" :class="{ active:queryParams.status === 0}">未读({{ adviceNum.unView }})</button>
      </div>
      <el-table
        :data="opinionList"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="序号"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          prop="opinionNo"
          align="center"
          label="意见编号">
        </el-table-column>
        <el-table-column
          prop="memberName"
          align="center"
          label="建议人"
          width="300">
        </el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          label="提出时间">
        </el-table-column>
        <el-table-column
          prop="opinionType"
          align="center"
          label="意见类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.opinionType == '组织建设'">{{ scope.row.opinionType }}</el-tag>
            <el-tag type="success" v-if="scope.row.opinionType == '优化建议'">{{ scope.row.opinionType }}</el-tag>
            <el-tag type="info" v-if="scope.row.opinionType == '其他意见'">{{ scope.row.opinionType }}</el-tag>
            <el-tag type="warning" v-if="scope.row.opinionType == '活动问题'">{{ scope.row.opinionType }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            v-hasPermi="['system:advice:check']"
            v-if="scope.row.status == 0"
            @click="checkMessage(scope.row.oid)"
            >待查看</el-button
          >
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.status == 1"
            @click="checkMessage(scope.row.oid)"
            >详情</el-button
          >
        </template>
      </el-table-column>
      </el-table>
      <el-dialog
        title="详细意见"
        :visible.sync="open"
        width="30%">
        <span>{{ opinionContent }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="open = false" v-if="opinionStatus == 0">取 消</el-button>
          <el-button type="primary" v-if="opinionStatus == 0" @click="read()">确 定</el-button>
          <el-button @click="open = false" v-if="opinionStatus == 1" >返 回</el-button>
        </span>
      </el-dialog>
      <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    </div>  
  </div>
</template>
<script>
import {
  opinionList,checkOpinion,view
} from "@/api/society";
export default {
  data(){
    return {
    //查询参数
    queryParams:{
      pageSize:10,
      pageNum:1,
      keyword:'',
      beginTime:'',
      endTime:'',
      status:'',
    },
    //总条数
    total:0,
    //意见列表
    opinionList:[],
    //窗口
    open:false,
    //目标意见
    opinionContent:'',
    //目标意见状态
    opinionStatus:'',
    //目标id
    oid:'',
    showSearch:true,
    //获取时间
    time:'',
    //反馈数量
    adviceNum:[],
    }
  },
  created(){
    this.getList()
  },
  methods:{
    getList(){
      let params = {
        ...this.queryParams
      }
      if(params.status != ''){
        params.status = Number(params.status)
      }
      opinionList(params).then(res =>{
        if(res.code == 200){
          this.total = res.total
          this.opinionList = res.rows
          this.opinionList.forEach((item,index) => {
            this.$set(item, "id", index + 1);
          });
        }
      })
      view().then(res=>{
        if(res.code == 200){
          this.adviceNum = res.data
        }
      })
    },
    //已阅
    read(){
      let params = this.oid
      this.open = false
      checkOpinion(params).then(res =>{
        if(res.code == 200){
          this.getList()
        }
      })
    },
    //打开窗口
    checkMessage(data){
      this.$router.push({
          path: "/society/adviceMessage",
          query: { key: data },
        });
    },
    //重置表单
    resetQuery() {
      this.queryParams = {
        pageSize:10,
        pageNum:1,
        keyword:'',
        beginTime:'',
        endTime:'',
        status:'',
      }
      this.time=''
      this.getList()
    },
    /** 搜索按钮操作 */
    handleQuery() {
    this.queryParams.pageNum = 1;
    this.getList();
    },
    //时间分割
    chooseTime(){
      this.queryParams.beginTime = this.time[0]
      this.queryParams.endTime = this.time[1]
    },
    //选择状态
    chooseStatus(data) {
      this.queryParams.status = data
      this.getList()
    },
  },
}
</script>
<style scoped>
.list{
  display: flex;
  flex-direction: column;
  margin:0px 20px;
  border-top:10px solid gainsboro;
  background-color:#FAFAFA;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 16px;
  color: #000000;
  padding:20px;
  margin-bottom:10px;
}
.list > div{
  margin-bottom: 10px;
}
.list > div > div:nth-child(n){
  margin-right: 60px;
}
.button{
  width:60px;
  height: 40px;
  background: black;
  color: white;
  text-align: center;
  margin-top: 30px;
  border:none
}
.active{
  border-bottom: none;
  background-color: #E8F4FF !important;
  color:#1890FF !important;
}
.typeButton button{
  height: 40px;
  outline:none;
  font-size:13px;
  font-weight: 600;
  border:none;
  font-family:"microsoft YaHei";
  color:#606266;
}
.typeButton{
  margin-bottom: 3px;
}
</style>